﻿body, div, hgroup, h2, h3, p, a {
    padding: 0px;
    margin: 0px;
}

.linear-gradient(@from-color,@to-color,@from-position: 0%,@to-position: 100%,@repeat: no-repeat) {
    background: @from-color;
    background: -moz-linear-gradient(top, @from-color @from-position, @to-color @to-position);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(@from-position,@from-color), color-stop(@to-position,@to-color));
    background: -webkit-linear-gradient(top, @from-color @from-position,@to-color @to-position);
    background: -o-linear-gradient(top, @from-color @from-position,@to-color @to-position);
    background: -ms-linear-gradient(top, @from-color @from-position,@to-color @to-position);
    background: linear-gradient(to bottom, @from-color @from-position,@to-color @to-position);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='@from-color', endColorstr='@to-color',GradientType=0 );
    background-repeat: @repeat;
}

@Resolution-width: 960px;
@font-family: Arial, 'DejaVu Sans', 'Liberation Sans', Freesans, sans-serif;
@font-size: 16px;

.clearfix {
    &:after {
        display: block;
        content: "";
        height: 0;
        clear: both;
    }
}

body {
    width: @Resolution-width;
    font-family: @font-family;
    font-size: @font-size;

    #wrapper {
        margin: 20px;
        vertical-align: top;

        & > div {
            float: left;
            vertical-align: top;
            width: 140px; /*Must be 150px without padding*/
            border: 2px solid #D3D7DA;
            padding: 10px 4px 5px 4px;

            hgroup {
                padding-left: 40px;
                padding-bottom: 15px;

                h2 {
                    font-weight: bold;
                    font-size: 1em;
                }

                h3 {
                    font-weight: bold;
                    font-size: 1em;
                }
            }
            /*bg images*/
            &:nth-of-type(1) {
                hgroup {
                    background-repeat: no-repeat;
                    background-position: 0 4px;
                    background-image: url(imgs/install.png);
                }
            }

            &:nth-of-type(2) {
                hgroup {
                    background-repeat: no-repeat;
                    background-position: 0 4px;
                    background-image: url(imgs/tuneUp.png);
                }
            }

            &:nth-of-type(3) {
                hgroup {
                    background-repeat: no-repeat;
                    background-position: 0 4px;
                    background-image: url(imgs/manage.png);
                }
            }

            &:nth-of-type(4) {
                hgroup {
                    padding-top: 20px;
                    background-repeat: no-repeat;
                    background-position: 0 4px;
                    background-image: url(imgs/openSource.png);
                }
            }

            &:nth-of-type(5) {
                hgroup {
                    padding-top: 20px;
                    background-repeat: no-repeat;
                    background-position: 0 4px;
                    background-image: url(imgs/twitter.png);
                }
            }

            &:nth-of-type(6) {
                hgroup {
                    padding-top: 20px;
                    background-repeat: no-repeat;
                    background-position: 0 4px;
                    background-image: url(imgs/about.png);
                }
            }





            &:nth-of-type(2n+1) {
                background-color: white;
                border-right: 0;
                border-left: 0;
                height: 245px;
            }

            &:nth-of-type(2n) {
                .linear-gradient(#FFFFFF,#F1F2F3);
                height: 265px;
            }

            &:first-of-type {
                border-left: 2px solid #D3D7DA;
            }

            p {
                margin-top: 1px;
            }

            &>div {
                padding-top: 5px;

                a {
                    display: block;
                    text-decoration: none;
                    color: #C72D2F;

                    span {
                        text-transform: uppercase;
                    }
                }
            }

            .yellowBox {
				padding-top:0px;
				border:1px solid #FFFF00;
				background-color:#FFFFDD;
                a {
					display:inline;
                }
            }
        }
    }
}
